<template>
  <div>
    <div class="row">
      <div class="col-4" v-for="nav in navs" :key="nav.title">
        <router-link :to="nav.route">
          <div class="card nav-wrap">
            <div class="nav-icon">
              <i :class="nav.icon"></i>
            </div>
            <div class="nav-content">
              <h3 class="nav-title">{{ nav.title }}</h3>
              <div class="nav-desc">{{ nav.desc }}</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['user']),
    hasXinlong() {
      return this.user.scopeArr.includes('dirReport')
    },
    navs() {
      const data = [
        {
          title: '产业专班',
          desc: '业务简介',
          icon: 'fa fa-tree',
          route: {
            name: 'index_class_nav',
          },
        },
      ]
      if (this.hasXinlong) {
        data.push({
          title: '新农直报',
          desc: '业务简介',
          icon: 'fa fa-leaf',
          route: {
            name: 'import_xinnong',
          },
        })
      }
      return data
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.nav-wrap {
  padding: 5rem 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  color: $body-color;

  &:hover {
    color: $primary;
    color: var(--primary);
  }
}
.nav-icon {
  font-size: 3rem;
  flex: 1;
  text-align: center;
  color: $gray-700;
}
.nav-content {
  flex: 2;
}
.nav-title {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
}
.nav-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
